<!--
 * @Description:前端导出
 * @Author: your name
 * @Date: 2023-06-30
 * @LastEditTime: 2023-06-30
 * @LastEditors: Please set LastEditors
-->
<template>
  <div class="page">
    <vxe-table
      size="medium"
      ref="tableRef"
      round
      :data="tableData"
      @checkbox-change="handleSelectionChange"
      @checkbox-all="handleSelectionChange"
      :loading="loading"
      :loading-config="{ text: '加载中' }"
      :checkbox-config="{ trigger: 'row', reserve: true }"
      :row-config="{ keyField: 'id', isHover: true }"
      :column-config="{ resizable: true }"
      :seq-config="{
        startIndex: (tablePage.currentPage - 1) * tablePage.pageSize,
      }"
      stripe
      auto-resize
      show-overflow="tooltip"
      height="300"
      align="center"
    >
      <vxe-column type="checkbox" width="60" fixed="left"></vxe-column>
      <vxe-column type="seq" title="序号" width="60"></vxe-column>
      <vxe-column field="name" title="Name" sortable></vxe-column>
      <vxe-column field="sex" title="Sex">
        <template #header><span style="color: red">*</span>性别</template>
      </vxe-column>
      <vxe-column field="age" title="Age">
        <template #default="{ row, rowIndex }">
          <vxe-button>{{ rowIndex }}-{{ row.age }}</vxe-button>
        </template>
      </vxe-column>
      <vxe-column field="rate" title="Rate"></vxe-column>
      <vxe-column fixed="right" title="操作" width="100">
        <template>
          <vxe-button type="text" size="medium" tableText>编辑</vxe-button>
        </template>
      </vxe-column>
      <template #empty> 11 </template>
    </vxe-table>
    <vxe-pager
      border
      size="medium"
      :loading="loading"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :total="tablePage.totalResult"
      :layouts="[
        'Total',
        'PrevPage',
        'JumpNumber',
        'NextPage',
        'Sizes',
        'FullJump',
      ]"
      @page-change="handlePageChange2"
    >
      <template #right> 121 </template>
    </vxe-pager>
  </div>
</template>
<script>
export default {
  name: "DemoFive",
  data() {
    return {
      loading: false,
      tableData: [],
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
      },
    }
  },
  created() {
    this.findList2()
  },
  methods: {
    // 被选数据
    handleSelectionChange({ records, reserves }) {
      console.log(records, " 选择的数据", reserves)
    },
    findList2() {
      this.loading = true
      setTimeout(() => {
        const list = [
          {
            id: 10001,
            name: "Test1",
            nickname: "T1",
            role: "Develop",
            sex: "1",
            age: 28,
            address: "Shenzhen",
          },
          {
            id: 10002,
            name: "Test2",
            nickname: "T2",
            role: "Test",
            sex: "0",
            age: 22,
            address: "Guangzhou",
          },
          {
            id: 10003,
            name: "Test3",
            nickname: "T3",
            role: "PM",
            sex: "1",
            age: 32,
            address: "Shanghai",
          },
          {
            id: 10004,
            name: "Test4",
            nickname: "T4",
            role: "Designer",
            sex: "0",
            age: 23,
            address: "Shenzhen",
          },
          {
            id: 10005,
            name: "Test5",
            nickname: "T5",
            role: "Develop",
            sex: "0",
            age: 30,
            address: "Shanghai",
          },
          {
            id: 10006,
            name: "Test6",
            nickname: "T6",
            role: "Develop",
            sex: "0",
            age: 27,
            address: "Shanghai",
          },
          {
            id: 10007,
            name: "Test7",
            nickname: "T1",
            role: "Develop",
            sex: "1",
            age: 28,
            address: "Shenzhen",
          },
          {
            id: 10008,
            name: "Test8",
            nickname: "T2",
            role: "Test",
            sex: "0",
            age: 22,
            address: "Guangzhou",
          },
          {
            id: 10009,
            name: "Test9",
            nickname: "T3",
            role: "PM",
            sex: "1",
            age: 32,
            address: "Shanghai",
          },
          {
            id: 100010,
            name: "Test10",
            nickname: "T4",
            role: "Designer",
            sex: "0",
            age: 23,
            address: "Shenzhen",
          },
          {
            id: 100011,
            name: "Test11",
            nickname: "T5",
            role: "PM",
            sex: "0",
            age: 35,
            address: "Shenzhen",
          },
          {
            id: 100012,
            name: "Test12",
            nickname: "T6",
            role: "Designer",
            sex: "1",
            age: 25,
            address: "Shanghai",
          },
          {
            id: 100013,
            name: "Test13",
            nickname: "T9",
            role: "Develop",
            sex: "1",
            age: 33,
            address: "Shenzhen",
          },
          {
            id: 100014,
            name: "Test14",
            nickname: "T6",
            role: "Develop",
            sex: "0",
            age: 21,
            address: "Shanghai",
          },
          {
            id: 100015,
            name: "Test15",
            nickname: "T6",
            role: "Develop",
            sex: "0",
            age: 19,
            address: "Shanghai",
          },
          {
            id: 100016,
            name: "Test16",
            nickname: "T8",
            role: "Develop",
            sex: "1",
            age: 29,
            address: "Shenzhen",
          },
        ]
        this.loading = false
        this.tablePage.totalResult = list.length
        this.tableData = list.slice(
          (this.tablePage.currentPage - 1) * this.tablePage.pageSize,
          this.tablePage.currentPage * this.tablePage.pageSize
        )
      }, 300)
    },
    handlePageChange2({ currentPage, pageSize }) {
      console.log({ currentPage, pageSize })
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.findList2()
    },
  },
}
</script>
<style lang="scss" scoped></style>
